在 Visual Studio Code 開發

Sail 成功的幫我們把專案建立好了，可以來開始寫程式啦!

不過這個專案是跑在容器裡的，而且在 Windows 上是跑在 WSL 當中，所以 VS code 也必須做些設置才有辦法處理這個專案。

需要先幫 VS Code 安裝套件 Remote Development

安裝好了之後，從 WSL 切到專案目錄底下，然後用指令

code .

這樣 VS code 就會在 WSL 容器的環境底下開啟專案。

如果是已經開啟 VS Code ，首先用 Ctrl+Alt+p 開啟命令面板。

找到指令

選擇指令後就會跳轉到 Remote Development 套件的面板，可以選擇要開啟哪個容器的專案

選擇之後 VS Code 重啟，變成這樣

代表成功在容器中開啟專案了

執行 Sail 指令

雖然開啟了專案但目前還無法藉由指令視窗對專案進行操作，必須藉由 Sail 讓我們可以跟容器中的環境互動。

開啟指令視窗後首先建立 sail 指令的捷徑

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

接著試試看

sail php -v

會顯示安裝在容器中的 php 版本

我們主要會利用 Sail 運作 composer ,artisan 的指令

Composer

php 套件管理工具，主要用來安裝第三方套件

執行 composer 的 dump-autoload 指令:

sail composer dump-autoload

Artisan

Laravel 內建的指令介面，用於指示 laravel 執行各種指令像是 migration , queue 等，也能用來快速產生 Controller 等檔案。

執行 artisan 的 migrate 指令:

sail artisan migrate

錯誤: chmod(): Operation not permitted

在執行 composer dump-autoload 時出現了這個錯誤，原因是 WSL 沒有讀寫檔案的權限。

設定 WSL 存取權限

WSL 中的每個 Ubuntu 環境可以個別設置權限，在想設定的 Ubuntu 環境中移動到 etc 資料夾

cd ~/../etc

在這裡找到 wsl.conf 檔案，如果沒有的話就做一個，在 wsl.conf 中寫入基礎的設定資訊

# /etc/wsl.conf
# Enable extra metadata options by default
[automount]
enabled = true
root = /windir/
options = "metadata"
mountFsTab = false

# Enable DNS – even though these are turned on by default, we'll specify here just to be explicit.
[network]
generateHosts = true
generateResolvConf = true

重點在 options = "metadata" 這行，開啟 metadata 選項讓 WSL 可藉由 metadata 取得讀寫權限。

設定好 wsl.conf 後退出 Ubuntu ，重啟他

wsl --shutdown   #停止所有 wsl 下的環境
wsl -d <Ubuntu 環境名稱>

記得也要重啟 Docker 。

要確認環境是否運行中可以用指令

wsl -l -v

References

File Permissions for WSL

WSL commands and launch configurations